<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" bar-width="80" @change="tabsChange"
				:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :style="{height:screenHeight-40+'px'}" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="platfrom">
						<view class="from_item" v-for="(item, index) in listdata" :key="index">
							<view class="item_time">{{getLocalTime(parseInt(item.created_at))}}</view>
							<view class="item_cont" @click="toDetailPage(item.id)">
								<view class="title">{{item.messageInfo.title}}</view>
								<view class="text">{{item.messageInfo.content}}</view>
							</view>
						</view>
						<u-empty v-if="islist" margin-top="140" text="暂无消息" mode="favor"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="platfrom">
						<view class="from_item" v-for="(item, index) in msgdata" :key="index" @click="tomsgpage(item)" >
							<view class="item_time" >{{getLocalTime(parseInt(item.created_at))}}</view>
							<view class="item_cont">
								<view class="title">{{item.messageInfo.title}}</view>
								<view class="text" v-if="item.message_id==19">
									您订阅的{{item.strategy_name}}还有{{item.expire}}天就到期了</view>
								<view class="text" v-else-if="item.message_id==20">您订阅的{{item.strategy_name}}已成功订阅
								</view>
								<view class="text" v-else>{{item.messageInfo.content}}</view>
							</view>
						</view>
						<u-empty v-if="ismsg" margin-top="140" text="暂无消息" mode="favor"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		getUserMessagePage,
		getUserMessagePage1
	} from '@/api/member.js'
	import {
		toUserMessageDetailPage
	} from '@/utils/PageRouter.js'
	import {
		parseTime
	} from '@/utils/index.js'

	export default {
		data() {
			return {
				list: [{
					name: '平台消息'
				}, {
					name: '服务提醒'
				}],
				islist: false,
				ismsg: false,
				listdata: [],
				msgdata: [],
				screenHeight: '',
				page: 1,
				limit: 10,
				page1: 1,
				limit1: 10,
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				updateTime: 0,
				created_at:0
			};
		},
		onLoad() {
			this.listmsg()
			this.getmsg()
			let _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.screenHeight = res.windowHeight

				}
			})
		},
		onshow() {

		},
		created() {

		},
		methods: {
			getLocalTime(nS) {
				return parseTime(new Date(nS), 'YYYY-MM-DD HH:mm:ss')
			},
			toTime(item){
			},
			//	详情
			toDetailPage(id) {
				toUserMessageDetailPage(id)
			},
			tomsgpage(item) {
				// let created_at =   new Date(parseInt(item.created_at) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
				let created_at = parseTime(new Date(parseInt(item.created_at)), 'YYYY-MM-DD HH:mm:ss');
				if (item.messageInfo.title == '本周报表') {
					uni.navigateTo({
						url: './msgdetail/index?date='+ item.created_at
					})
				} else {
					uni.navigateTo({
						url: './remind/remind?item=' + encodeURIComponent(JSON.stringify(item))
					})
				}

			},
			addDate() {
				const nowDate = new Date();
				const date = {
					year: nowDate.getFullYear(),
					month: nowDate.getMonth() + 1,
					date: nowDate.getDate(),
				}
				const newmonth = date.month > 10 ? date.month : '0' + date.month
				const day = date.date > 10 ? date.date : '0' + date.date
				this.updateTime = date.year + '-' + newmonth + '-' + day
				//alert(this.updateTime)
			},
			getmsg() { //服务提醒
				this.addDate()
				let {
					page,
					limit
				} = this
				// status: i,
				getUserMessagePage({
					page,
					limit
				}).then(res => {
					// if(i==0){
					// 	this.listdata=res.data.filter(function(item){
					// 		return item.type==1
					// 	})
					// 	if(this.listdata.length==0) this.islist=true;
					// 	this.msgdata=res.data.filter(function(item){
					// 		return item.type==2
					// 	})
					this.msgdata.push(...res.data)
					if (this.msgdata.length == 0) this.ismsg = true;
					// }
				})
			},
			listmsg() { //平台消息
				let {
					page1,
					limit1
				} = this
				getUserMessagePage1({
					page1,
					limit1
				}).then(res => {
					this.listdata.push(...res.data)
					if (this.listdata.length == 0) this.islist = true;
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				// this.getmsg(index)
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
				// this.getmsg()
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				// this.getmsg(current)
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.current == 0) {
					this.page1 += 1
					this.listmsg()
				} else {
					this.page += 1
					this.getmsg()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.platfrom {
		padding: 10px 20px;

		.from_item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 20px;

			.item_time {
				background-color: #CCCCCC;
				padding: 1px 10px;
				border-radius: 20px;
				color: #fff;
				font-size: 12px;
			}

			.item_cont {
				width: 100%;
				background-color: #fff;
				margin-top: 10px;
				padding: 10px;
				border-radius: 5px;
				box-shadow: rgba(0, 0, 0, .2) 0px 0px 3px;

				.title {
					font-size: 16px;
					font-weight: bold;
				}

				.text {
					width: 100%;
					margin-top: 10px;
					lines: 2;
					color: #333;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

	.body-content {
		flex: 1;
	}

	.message-text {
		lines: 3;
		text-overflow: ellipsis;
		line-height: 24;
		color: #333;
		font-size: 28rpx;
	}

	.footer {
		padding: 20rpx 0;
		flex-direction: row;
		justify-content: flex-end;
	}

	.message-time {
		color: #999;
		font-size: 24rpx;
	}
</style>
